<template>
  <page-body bgImg=' ' safeAreaLeft>
    <view class="pages font-B ">
      <nav-bar title=' ' titleColor='#333' :borderBottom='false' :backBtn='false'>
        <view slot="left" class="font-B font-14 c-008399" @tap="back()">关闭</view>
      </nav-bar>
      <image class="top-logo" :src="ossDomain + '/system-logo.png'"></image>
      <view class="account-title font-26 c-333 jh-flex-center">
        轻触头像以切换账号
      </view>
      <scroll-view class="account jh-flex jh-column" scroll-y>
        <view style="height: 24px;"></view>
        <view class="account-item jh-align-center ">
          <image class="account-item-avatar" :src="user.head_pic || ossDomain + '/addressBook-edit-avatar.png'"></image>
          <view class="margin-l17 jh-flex-item">
            <view class="jh-space-between">
              <view class="font-17 c-000 jh-line-height">{{user.username || ''}}</view>
              <view class="font-17 c-008399 jh-line-height">当前使用</view>
            </view>
            <view class="font-17 jh-line-height margin-t10" style="color: #9FA0A0;">{{user.mobile || ''}}</view>
          </view>
        </view>
        <view style="height: 24px;"></view>
        <view class="account-item jh-align-center" v-if="userInfo2.token" @tap='changeAccount'>
          <image class="account-item-avatar" :src="user2.head_pic || ossDomain + '/addressBook-edit-avatar.png'"></image>
          <view class="margin-l17 jh-flex-item">
            <view class="jh-space-between">
              <view class="font-17 c-000 jh-line-height">{{user2.username || ''}}</view>
              <!-- <view class="font-17 c-008399 jh-line-height">当前使用</view> -->
            </view>
            <view class="font-17 jh-line-height margin-t10" style="color: #9FA0A0;">{{user2.mobile || ''}}</view>
          </view>
        </view>
        <view v-else class="account-item jh-align-center" @tap="$navigateTo('/pages/login/main?type=change')">
          <image class="account-item-avatar" :src="ossDomain + '/system-add.png'"></image>
          <view class="margin-l17 jh-flex-item">
            <view class="jh-space-between">
              <view class="font-17 c-000 jh-line-height">添加账号</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <backBtn></backBtn>
  </page-body>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  // #ifdef APP-PLUS
  const trtc = uni.requireNativePlugin('tx-call');
  //#endif
  import backBtn from '@/components/back-btn/back'
  export default {
    components: {
      backBtn
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo,
      }),
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        user: {},
        userInfo2: {},
        user2: {},
      }
    },
    onShow() {
      this.user = this.userInfo.user
      this.userInfo2 = uni.getStorageSync('userInfo2') || {}
      this.user2 = this.userInfo2.user || {}
    },
    methods: {
      changeAccount () {
        uni.showLoading()
        uni.setStorageSync('userInfo2', this.userInfo)
        this.loginOut()
        this.login(this.userInfo2)
      },
      loginOut () {
        this.$store.dispatch('resetStore')
        uni.$app.logout()
        this.$store.commit('setUserInfo', this.userInfo2);
      },
      login(info) {
        let {tencent_user_id} = info.user
        tencent_user_id = String(tencent_user_id)
        let obj = {
          identifier: tencent_user_id,
          expire: 259200
        }
        this.$http.getUserSig(obj).then(res => {
          let {userSig, sdkappid} = res.data
          // #ifdef APP-PLUS
          if (trtc) {
            trtc.logout(result=>{
              console.log(result);
              trtc.login({
                sdkAppId: sdkappid,
                userId: tencent_user_id,
                userSig,
              }, res => {
                console.log('login:', res);
              })
            });
          }
          // #endif
          uni.$app.login({
            userID: tencent_user_id,
            userSig: userSig
          }).then(() => {
            this.$store.commit('setRtcConfig', {
              userSig: userSig,
              sdkAppID: sdkappid,
              userID: tencent_user_id
            });
            this.user = this.userInfo.user
            this.userInfo2 = uni.getStorageSync('userInfo2') || {}
            this.user2 = this.userInfo2.user || {}
            uni.hideLoading()
          }).catch(() => {})
        })
      },
      back () {
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding:0 30px;
    box-sizing: border-box;
    position: relative;
  }
  .top-logo{
    width: 54px;
    height: 37px;
    display: block;
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
  }
  .account{
    height: calc(100vh - 142px);
    &-title{
      width: 280px;
      padding:14px 27px;
      border-bottom: 1px solid #ddd;
      margin: 0 auto;
    }
    &-item{
      width: 100%;
      height: 90px;
      padding: 0 24px;
      box-sizing: border-box;
      background-color: #fff;
      &-avatar{
        width: 62px;
        height: 62px;
        display: block;
        border-radius: 50%;
      }
    }
  }
</style>
